<template>
    <div clas="searchForm">
        <z-search-form
            :itemList.sync="formItemList"
            :isShowForm="isShowForm"
            labelWidth="80px"
            @handleSearch="handleSearch"
            @handleReset="handleReset"
            @itemValChange="itemValChange"
            ref="searchArea"
        >
            <template v-slot:orderstatus-select>
                <el-select v-model="orderstatus" style="width: 100%">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                    ></el-option>
                </el-select>
            </template>
            <template v-slot:customButton>
                <el-button>新增</el-button>
                <el-button>删除</el-button>
            </template>
        </z-search-form>
        <z-com-table-header
            ref="tableHeaderRef"
            :option="tableHeaderOption"
            @search="handleHeaderSearch"
            @onVisibleSearch="highVisibleSearch"
            @highResetClick="highResetClick"
            @operateBtnClick="operateBtnClick"
            @selectValChange="selectValChange"
        />
    </div>
</template>

<script>
export default {
  data () {
    return {
      isShowForm: false,
      orderstatus: '',
      options: [ { value: 1, label: '正常' }, { value: 2, label: '报废' } ],
      formItemList: [
        { type: 'input', label: '姓名1', placeholder: '请输入来电人姓名', key: 'name1', value: null, },
        { type: 'date', label: '日期', placeholder: '请输入来电人姓名', key: 'date', value: null, },
        { type: 'daterange', label: '日期', placeholder: '请输入来电人姓名', key: 'daterange', value: null, },
        { type: 'datetimerange', label: '姓名3', placeholder: '请输入来电人姓名', key: 'datetimerange', value: null, },
        { type: 'input', label: '姓名3', placeholder: '请输入来电人姓名', key: 'name3', value: null, },
        { type: 'select', label: '姓名3', placeholder: '', key: 'select', value: null, option: [ { value: 1, label: '11' }, { value: 2, label: '22' } ] },
        { type: 'input', label: '姓名3', placeholder: '请输入来电人姓名', key: 'name4', value: null },
        { type: 'input', label: '姓名3', placeholder: '请输入来电人姓名', key: 'name5', value: null },
        { type: 'slot', slot: 'orderstatus-select', label: '工单状态', placeholder: '请选择工单状态', key: 'processStatus', value: null },

      ],
      isHighSearch: false,
      tableHeaderOption: {
        topBtnsLimitNum: 4,
        itemLimitNum: 3, // 一行可以排列搜索条件个数 
        isShowHighSearch: true,
        operateData: [
          { name: '新增', disabled: false },
          { name: '删除', disabled: false },
          { name: '编辑', disabled: false },
          { name: '查看', disabled: false },
          { name: '导出', disabled: false },
          { name: '导入', disabled: false },
        ],
        searchData: [
          {
            colkey: 'flag',
            name: '告警ID',
            placeholder: '请输入告警ID',
            type: 'input',
            className: '',
            searchItemValue: '',
            style: '',
          },
          {
            colkey: 'objectId',
            name: '设备名称',
            placeholder: '请选择设备名称',
            type: 'select',
            selectData: [],
            className: '',
            searchItemValue: '',
            style: '',
          },
          {
            colkey: 'alarmStyle',
            name: '告警类型',
            placeholder: '请选择告警类型',
            type: 'select',
            selectData: [
              { label: '全部', value: '0', },
              { label: '性能', value: '1', },
              { label: '安全', value: '2', },
              { label: '资源', value: '3', },
              { label: '状态', value: '4', },
            ],
            searchItemValue: '0',

            className: '',
            style: '',
          },
          {
            colkey: 'ruleName',
            name: '告警规则',
            placeholder: '请输入告警规则',
            type: 'input',
            className: '',
            searchItemValue: '',
            style: '',
          },
          {
            colkey: 'date',
            name: '告警时间',
            placeholder: '请输入告警规则',
            type: 'date',
            className: '',
            searchItemValue: [ 1661239596000, 1661325996000 ],
            timeOption: {
              datePicker: {
                dateTimeTexts: [ '6小时', '12小时', ],// 按钮数组
                allButtonVisible: true,//是否显示全部按钮
                placeholder: '',
                pickerOptions: {}, //参考element-ui设置，https://element.eleme.cn/#/zh-CN/component/datetime-picker
              }
            },
            style: '',
          },
          {
            colkey: 'date2',
            name: '告警时间2',
            placeholder: '请输入告警规则',
            type: 'date',
            className: '',
            searchItemValue: [ 1661239596000, 1661325996000 ],
            timeOption: {
              datePicker: {
                dateTimeTexts: [ '6小时', '12小时', '1天' ],// 按钮数组
                allButtonVisible: true,//是否显示全部按钮
                placeholder: '',
                pickerOptions: {}, //参考element-ui设置，https://element.eleme.cn/#/zh-CN/component/datetime-picker
              }
            },
            style: '',
          }
        ]
      }
    }
  },
  mounted () {
    this.isShowForm = true
    setTimeout(() => {
      this.formItemList[ 5 ].option = [ { value: 3, label: '33' }, { value: 4, label: '44' } ]
    }, 5000)
  },
  methods: {
    operateBtnClick (btn) {
      console.log(btn, 'btn')
    },
    handleHeaderSearch (val, type) {
      console.log(val, type, '+++++++++++++++===============')
    },
    handleSearch (val) {
      console.log(val, '+++++++++')
    },
    handleReset () { },
    handleNormalSearch (val, type) {
      console.log(val, type, '+++++++++++')
    },
    handleHighSearch (val, type) {
      console.log(val, type, '+++++++++++')
    },
    highVisibleSearch () {
      this.isHighSearch = !this.isHighSearch
    },
    highResetClick () { },
    selectValChange (val) {
      console.log(val, 'selectValChange')
    },
    itemValChange (val, item) {
      console.log(val, item, 'itemValChange')

    }
  }
}
</script>

<style>
</style>